<template>
  <div id="app">
    <div id="left">
      <div class="logo">
        <p>电子健康码系统</p>
      </div>
      <ul class="menu">
        <li
          :class="{'active':index===k}"
          v-for="(item,k) in silder"
          :key="k"
          @click="sildGo(item.router,k)"
        >{{item.title}}</li>
      </ul>
      <div class="bottom">
        欢迎您：{{userName}}
        <b @click="exit">[退出]</b>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "left",
  data() {
    return {
      logo: require("../../static/logo.png"),
      silder: [
        {
          title: "健康卡数据监测",
          router: "/"
        },
        {
          title: "电子健康卡管理",
          router: "healthcreate"
        },

        {
          title: "各医院数据",
          router: "hospitaldata"
        }
      ],
      userName: "管理员",
      index: 0
    };
  },
  mounted() {},
  methods: {
    sildGo(router, index) {
      this.index = index;
      this.$router.push(router);
    },
    exit() {
      this.$confirm("确定要退出该系统吗？", "提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    }
  },
  components: {},
  watch: {},
  props: {},
  computed: {}
};
</script>
<style scoped>
#app {
  background: none;
  background-color: #fff;
  flex-direction: row;
}
</style>